<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>
    <!-- 不知为何配置项不生效 无法实现 box-shadow 效果 -->
    <!-- <script defer>
      window.__unocss = {
        rules: [['mainShadow', { 'box-shadow': ' 0 0 0 16px #03a9f4' }]],
        // CDN 引入unocss 不需要写下面的配置也是生效的
        // presets: [presetAttributify()],
      }
    </script> -->
    <link rel="stylesheet" href="./style.css" />
    <title>08_CSS 悬停效果之字形 D</title>
  </head>
  <body class="select-none box-border grid place-content-center h-screen duration-300 @dark:bg-black bg-white">
    <div id="switch-area" class="fixed top-[20px] right-[25px] w-[50px]">
      <input
        type="checkbox"
        id="switch"
        name="switch"
        class="absolute block right-25px w-25px h-[25px] rounded-1/2 appearance-none bg-slate-3 border-4 border-slate-3 cursor-pointer duration-300 z-10"
        checked="right-0 bg-green-4 border-4 border-white"
      />
      <label
        for="switch"
        class="absolute top-3px w-full h-20px block rounded-20px cursor-pointer bg-slate-5 duration-300"
      ></label>
    </div>
    <!-- TODO: 配置的 box-shadow 未生效,待解决 -->
    <main
      class="relative w-300px h-300px rounded-1/2 mainShadow text-center duration-300 grid place-items-center"
      hover="rounded-3px bg-transparent"
      before="absolute content-none top-0 left-0 w-full h-full bg-sky-4 -z-10 -rotate-45 rounded-16px"
    >
      <p class="text-white font-serif duration-300">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae voluptas amet ullam dignissimos a. Dicta
        ducimus porro saepe sit nemo, voluptates beatae harum nihil animi expedita ex placeat adipisci perspiciatis.
      </p>
    </main>
    <script>
      // 判断当前是否为暗色模式
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
      const btn = document.querySelector('#switch')
      // if (isDarkMode) btn.checked = true
    </script>
    <script>
      const body = document.body
      btn.onclick = function () {
        if (btn.checked) {
          body.style.backgroundColor = '#121212'
        } else {
          body.style.backgroundColor = '#fff'
        }
      }
    </script>
  </body>
</html>
